<template>
  <div style="height:75px">
    <mt-tabbar fixed v-model="selected">

      <mt-tab-item id="tab1">
        <i slot="icon" class="iconfont icon-shouye"></i>
        <router-link to="/" exact >
          首页
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="tab2">
          <i slot="icon" class="iconfont icon-xinwen"></i>
        <router-link to="/news" >
          新闻
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="tab3">
          <i slot="icon" class="iconfont icon-chanpin"></i>
        <router-link to="/product" >
          产品
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="tab4">
          <i slot="icon" class="iconfont icon-gouwuche"></i>
        <router-link to="/cart" >
          购物车
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="tab5">
        <i slot="icon" class="iconfont icon-wode"></i>
        <router-link to="/my" >
          我的
       </router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import Vue from 'vue';

  import { Tabbar, TabItem } from 'mint-ui';

Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
export default{
  data(){
    return{
      selected:'tab3'
    }
  }
}
</script>

<style>
  li{
    list-style: none;
  }
  .mint-tabbar > .mint-tab-item.is-selected a{
        color :red;
        /* background-color: Yellow */
    }

  .mint-tab-item-label a{
    text-decoration:none
  }
</style>

